<template>
  <div>
    <h1>Parent</h1>
    <!--父组件向子组件传递值 v-bind:msg  子组件里用props-->
    <!--子组件向父组件传递值 通过事件触发 @showMsg="showMsg" 就是监听子组件里的事件-->
    <m-child
      v-bind:msg="'from parent msg '"
      @showMsg="showMsg"
      ref="child"
      v-bind="$attrs"
    ></m-child>
    <h3>{{ msg }}</h3>
    <!--使用vuex里面的函数-->
    <h5>
      vuex<span style="color: red">{{ count }}</span>
    </h5>
    <h5>
      getter<span style="color: red">{{ doubleCount }}</span>
    </h5>
    <button @click="add">增加</button>
    <button @click="delayAdd">异步增加</button>
  </div>
</template>

<script>
import MChild from "./Child";
import { mapState } from "vuex";
import { mapMutations } from "vuex";
export default {
  //第一种方式
  // computed: {
  //     count() {
  //         return this.$store.state.count
  //     }
  // },
  //多个属性的时候
  computed: {
    ...mapState({
      // count: "count",
      //模块化的时候要加上模块名
      count: (state) => state.count.count,
      //   a: "a",
    }),
    doubleCount() {
      return this.$store.getters.doubleCount;
    },
  },
  data() {
    return {
      msg: "",
    };
  },
  components: {
    MChild,
  },
  methods: {
    showMsg(val) {
      this.msg = val;
    },
    // add(){
    //     this.$store.commit('add')
    // },
    //下面这段就是把 this.add 映射成为this.$store.commit('add')
    ...mapMutations(["add"]),

    delayAdd() {
      this.$store.dispatch("delayAdd");
    },
  },
  mounted() {
    //vue 3.0版本不再支持$children
    console.log(this.$children);
    console.log("ref", this.$refs.child.childMsg);
  },
};
</script>

<style>
</style>